import { useEffect } from 'react'
import { connect } from 'react-redux'
import { Route, Switch } from 'react-router-dom';
import { Layout } from 'antd';
import {
	changeCurrentItem,
} from '../../store/actions'

import HeaderContent from '../../components/headerContent';
import InfoContent from '../../components/infoContent';
import SettingContent from '../../components/settingContent';

import {
	wrapper,
} from './index.module.css'


const { Header,  Content } = Layout;

function Info(props) {

	const { changeCurrentItem, user, islogin } = props;
	const { history } = props;
	const { path, params: { id } } = props.match;


	useEffect(() => {
		changeCurrentItem('info');
	}, [changeCurrentItem]);

	useEffect(() => {
		// 当进入信息页没参数时,默认跳转自身,未登录则跳转登录
		if (path !== '/info/setting' && id === undefined) {
			if (islogin) {
				if (user.id === -1) return;
				history.push(`/info/${user.id}`);
			} else {
				history.push({pathname: '/home', state: {log: true}});
			}
			return;
		}
	}, [path, user.id, id, islogin, history]);


	return (
		<Layout className={wrapper}>
			<Header className="header">
				<HeaderContent />
			</Header>
			<Content className="align_self_center">
				<Switch>
					<Route path="/info/setting" component={SettingContent} />
					<Route path="/info/:id" component={InfoContent} />
				</Switch>
			</Content>
		</Layout>
    )
}

function mapStateToProps(state) {
	return {
		user: state.user,
		islogin: state.islogin,
	}
}

export default connect(
	mapStateToProps, 
	{
		changeCurrentItem
	}
)(Info);
